<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #star-five {
    margin: 60px 0;
    width: 0;
    height: 0;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    transform: rotate(35deg);

  }

  #star-five:before {
    content: '';
    position: absolute;
    top: -45px;
    left: -65px;
    height: 0;
    width: 0;
    border-bottom: 80px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    transform: rotate(-35deg);
  }

  #star-five:after {
    position: absolute;

    top: 3px;
    left: -105px;
    width: 0px;
    height: 0px;
    border-right: 100px solid transparent;
    border-bottom: 70px solid red;
    border-left: 100px solid transparent;
    transform: rotate(-70deg);

    content: '';
  }
  table{
    border: 1px solid black;
  }
  thead tr td{
    background-color: green !important ;
  }
  tr:nth-child(2n+1){
    background-color: aqua;
  }
  tr:nth-child(2n){
    background-color: rgb(178, 60, 31);
  }
  tr:hover{
    background-color: black;
  }
    </style>
</head>
<body>
<div id="star-five"></div>
<table>
  <thead>
    <tr>
      <td>这是表头</td>
      <td>这是表头</td>
      <td>这是表头</td>
      <td>这是表头</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <tr>
          <td>3-1</td>
          <td>3-2</td>
          <td>3-3</td>
          <td>3-4</td>
    </tr>

        <tr>
          <td>4-1</td>
          <td>4-2</td>
          <td>4-3</td>
          <td>4-4</td>
    </tr>
    <tr>
      <td>5-1</td>
      <td>5-2</td>
      <td>5-3</td>
      <td>5-4</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>